<template>
  <v-container fluid fill-height>
    <v-row fill-height>
      <v-col cols="9">
        <v-card flat>
          <v-card-title v-text="'视频课件'" />
          <iframe
            src="//player.bilibili.com/player.html?aid=75424673&bvid=BV1pE411e7DF&cid=129020822&page=17"
            allowfullscreen="allowfullscreen"
            width="100%"
            height="500"
            scrolling="no"
            frameborder="0"
            sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
          ></iframe>
        </v-card>
      </v-col>
      <v-col cols="3">
        <v-row height="50%">
          <FileList />
        </v-row>
        <v-row height="50%" class="mt-2">
          <v-card
            outlined
            height="100%"
            width="100%"
            class="d-flex flex-column"
          >
            <v-list two-line>
              <v-subheader>创建问题</v-subheader>
              <v-list-item>
                <v-list-item-content>
                  <v-text-field
                    class="pt-2"
                    dense
                    outlined
                    hide-details
                    v-model="question"
                    label="问题"
                  />
                  <v-text-field
                    class="pt-2"
                    dense
                    outlined
                    hide-details
                    v-model="content"
                    label="描述"
                  />
                  <v-btn class="py-2" color="primary" text @click="editQuestion"
                    >提交</v-btn
                  >
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-card>
        </v-row>
      </v-col>
    </v-row>
    <statistic-graph />
  </v-container>
</template>
<script>
import StatisticGraph from "../components/StatisticGraph.vue";
import FileList from "../components/FileList.vue";
export default {
  components: {
    FileList,
    StatisticGraph
  },
  data: () => ({
    question: "",
    content: ""
  }),
  methods: {
    editQuestion() {
      this.$store.commit("SET_QUESTION", this.question);
      this.$store.commit("SET_CONTENT", this.content);
      this.$router.push({ name: "课程讨论" });
    }
  }
};
</script>
